<template>
  <div class="managerDialogMask" ref="managerDialogMask" v-show="showManagerDialog" @click="close">
    <div class="managerDialog" ref="managerDialog" @click.stop>
      <div class="close pointer" @click="close">x</div>
      <div class="bgImg">
        <div class="auto">
          <p class="bigTitle">{{$t('myAdd.invitation.posterApplyManager')}}</p>
       <!--   <p class="line"></p>
          <p class="bigTitleDes"></p>
          <p class="line"></p>-->
        </div>
      </div>
      <div class="aboutManager">
        <p>{{dialogRule}}</p>
        <button @click="toApplyNow" :class="{readOnly: !dbClick}">{{$t('myAdd.invitation.nowApply')}}</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'managerDialog',
  props: ['showManagerDialog', 'dialogRule', 'dbClick'],
  data () {
    return {
      showTimer: null
    }
  },
  watch: {
    'showManagerDialog' (newV) {
      if (newV) {
        this.showTimer && clearTimeout(this.showTimer)
        this.showTimer = setTimeout(() => {
          this.$refs.managerDialogMask.classList.remove('opac')
          this.$refs.managerDialog.classList.add('translateY')
        }, 15)
      } else if (!newV) {
        this.$refs.managerDialogMask.classList.add('opac')
        this.$refs.managerDialog.classList.remove('translateY')
      }
    }
  },
  methods: {
    toApplyNow () {
      this.$emit('toApplyNow')
    },
    close () {
      this.$emit('closeManagerDialog')
    }
  }
}
</script>

